import Avator from "../../../common/Avator";
import {
  getPersonalItem,
  getPersonalLabel,
  getRgb,
} from "../../../common/utils";
import Title from "../components/title";
import { context } from "../../../common/context";

function ResumeHeader() {
  const {
    resume: { personalDetails, customization },
  } = context;
  const { applyAccentColor, header, colors } = customization;
  const { position, photoObj } = header;

  const detailsOrder = (personalDetails?.detailsOrder || []).filter(
    (item) => item !== "name" && item !== "expJob"
  );
  const nameStyle: any = {};
  const color = getRgb((colors as Colors).strong.accentColor);

  if (applyAccentColor?.includes("name")) {
    nameStyle.color = color;
  }
  const jobStyle: any = {};
  if (applyAccentColor?.includes("expJob")) {
    jobStyle.color = color;
  }

  const nameWraperStyle: any = {
    display: "flex",
    marginBottom: "10px",
    gap: "10px",
    alignItems: "flex-end",
  };
  if (position === "top") {
    nameWraperStyle.justifyContent = "center";
  }

  const arr = [];
  const tobeshowdetailsOrder = ["name", "expJob", ...detailsOrder]
    .map((d: any) => {
      return {
        name: getPersonalLabel(personalDetails, d, false),
        value: getPersonalItem(personalDetails, d),
        type: d,
      };
    })
    .filter((item) => item.value);

  if (tobeshowdetailsOrder.length % 2 !== 0) {
    tobeshowdetailsOrder.push({
      name: "",
      value: "",
      type: "",
    });
  }
  for (let i = 0; i < tobeshowdetailsOrder.length; i++) {
    if (i % 2 === 0) {
      arr.push([tobeshowdetailsOrder[i]]);
    } else {
      arr[~~(i / 2)].push(tobeshowdetailsOrder[i]);
    }
  }
  return (
    <>
      <tr>
        <td colSpan={5} style={{ border: "none", height: "50px" }}>
          <div
            style={{
              textAlign: "center",
              fontWeight: "bold",
              fontSize: "32px",
              position: "relative",
              top: "-14px",
            }}
          >
            个人简历
          </div>
        </td>
      </tr>
      {arr.map((d, index) => {
        return (
          <tr key={index}>
            {d.map((t, index2) => {
              return (
                <>
                  <Title className="center label" header width={120}>
                    {t.name}
                  </Title>
                  <td
                    width={200}
                    style={{
                      padding: " 0 20px",
                      color:
                        t.type === "name"
                          ? nameStyle.color
                          : t.type === "expJob"
                          ? jobStyle.color
                          : "",
                    }}
                    colSpan={index > 2 && index2 === 1 ? 2 : 1}
                  >
                    {t.value}
                  </td>
                  {index === 0 &&
                  index2 === 1 &&
                  photoObj.showPhoto &&
                  personalDetails.photoObj.photo ? (
                    <td rowSpan={3} style={{ padding: 0 }}>
                      <Avator
                        {...personalDetails.photoObj}
                        {...photoObj}
                      ></Avator>
                    </td>
                  ) : null}
                </>
              );
            })}
          </tr>
        );
      })}
    </>
  );
}
export default ResumeHeader;
